<template>
  <div class="pos-rel tree-select"  >
    <el-input placeholder="请选择" ref="reference"
              size="medium"
              :value="valueText" class="input-with-select"
              readonly
              @blur="blurInput"
              @focus="focusInput">
      <template #append>
        <el-button  icon="el-icon-search" @click="$refs.reference.focus()"></el-button>
      </template>
    </el-input>
    <transition
        name="el-zoom-in-top">
      <el-select-menu
          ref="popper"
          style=""
          class="w-full"
          @mouseenter.native="mouseenter"
          @mouseleave.native="mouseleave"
          :append-to-body="true"
          v-show="visible">
        <el-scrollbar
            tag="ul"
            wrap-class="el-select-dropdown__wrap"
            view-class="el-select-dropdown__list">
        </el-scrollbar>
                <el-tree
                    :props="props"
                    :load="load"
                    :data="data"
                    class="w-full"
                    :lazy="lazy"
                    v-bind="$attrs"
                    style="padding-bottom: 12px;max-height: 400px;overflow-y: auto"
                    :show-checkbox="showCheckbox"
                    :expand-on-click-node="expandOnClickNode"
                    @node-click="nodeClick"
                    @node-expand="$refs.reference.focus()"
                    @node-collapse="$refs.reference.focus()"
                    @check-change="handleCheckChange">
                </el-tree>
      </el-select-menu>
    </transition>
  </div>
</template>

<script>
import ElSelectMenu from "element-ui/packages/select/src/select-dropdown.vue";

export default {
  name: "TreeSelect",
  components: {ElSelectMenu},
  props:{
    data:{
      type: Array ,
      default:()=>[]
    },
    expandOnClickNode: false ,
    props:{
      type: Object ,
      default:()=>{
        return {}
      }
    },
    load: {
      type: Function ,
      default:()=>{
        return new Function() ;
      }
    } ,
    lazy: {
      type:Boolean ,
      default: false
    },
    showCheckbox:{
      type:Boolean ,
      default: false
    },
    value: {
      type: [String , Number , Array] ,
      default: ""
    },
  },
  data(){
    return {
      valueText: '',
      visible: false ,
      status:{
        focus: false,
        mouseenter: false
      }
    }
  },
  mounted() {
  },
  methods:{
    blurInput(){
      //失去焦点时，鼠标是否在菜单上，鼠标不在菜单上关闭菜单
      this.status.focus = false
      if(!this.status.mouseenter){
        this.close()
      }
    },
    mouseenter(){
      //鼠标在菜单上面
      this.status.mouseenter = true
    },
    mouseleave(){
      // 鼠标离开时，焦点不在菜单上进行关闭
      this.status.mouseenter = false
      if(!this.status.focus){
        this.close()
      }
    },
    focusInput(){
      this.status.focus = true
      this.visible = true ;
    },
    close(){
      this.visible = false ;
    },
    setText(name){
      this.valueText = name ;
    },
    handleCheckChange(a , b , c){
      this.$emit("handle-check-change", a , b , c)
    },
    nodeClick(a , b , c){
      this.$emit("node-click", a , b , c)
    }
  }
}
</script>


<style scoped>
  .tree-select .el-tree-node__content{
    height: auto;
  }
</style>